<template>
	<view>
		<view class="nav">
			<view class="go-back iconfont" @click="goback">
				&#xe602;
			</view>
			<view class="btn-box">
				<view class="btn-item" :class="{active:clickItem==index}" v-for="(item,index) in items" @click="tabItem(index)">
					{{item.tab}}
				</view>

			</view>
			<view class="iconfont" @click="toXuanzelianxiren" v-show="clickItem==1" >
				&#xe63a;
			</view>

		</view>

		<view class="tongzhi-box" v-show="clickItem==0">

		</view>
		<view class="xiaoxi-box" v-show="clickItem==1">
			<view class="kehu-lists">
				<view class="kehu-item">
					
						<view class="touxiang-box">
							<image src="http://ai.ylcaifu.com/appimg/images/5.0-%E6%88%91%E7%9A%84-%E7%90%86%E8%B4%A2%E5%B8%88/5.1-%E6%88%91%E7%9A%84%E5%AE%A2%E6%88%B7%EF%BC%88CRM%EF%BC%89/android/drawable-xhdpi/touxiang.png"
							 mode="aspectFit" class="touxiang-image"></image>
						</view>

						<view class="kehu-message">
							<view class="kehu-message-top">
								<view class="kehu-name">
									李逵之
								</view>
								<view class="time">
									2019-10-10 11：11
								</view>
							</view>
							<view class="kehu-message-bottom">
								明天到您办公室拜访
							</view>
						</view>
					

				</view>

				<view class="kehu-item">
					
						<view class="touxiang-box">
							<image src="http://ai.ylcaifu.com/appimg/images/5.0-%E6%88%91%E7%9A%84-%E7%90%86%E8%B4%A2%E5%B8%88/5.1-%E6%88%91%E7%9A%84%E5%AE%A2%E6%88%B7%EF%BC%88CRM%EF%BC%89/android/drawable-xhdpi/touxiang.png"
							 mode="aspectFit" class="touxiang-image"></image>
						</view>

						<view class="kehu-message">
							<view class="kehu-message-top">
								<view class="kehu-name">
									李逵之
								</view>
								<view class="time">
									2019-10-10 11：11
								</view>
							</view>
							<view class="kehu-message-bottom">
								明天到您办公室拜访
							</view>
						</view>
				

				</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				clickItem: 0,
				items: [{
					id: 0,
					tab: '通知'
				}, {
					id: 1,
					tab: '消息'
				}]
			};
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			tabItem(index) {
				if (this.clickItem !== index) {
					this.clickItem = index;
				}
			},
			toXuanzelianxiren(){
				uni.navigateTo({
					url: './xuanzelianxiren',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
	}
</script>

<style>
	.iconfont {
		font-size: 18px;
	}

	.nav {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 34px 15px 15px 18px;
		background: rgba(249, 249, 249, 1);

	}

	.btn-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 160px;
		border-radius: 10upx;
		box-sizing: border-box;
		margin: 0 auto;
		overflow: hidden;
		border: 1px solid rgba(196, 156, 90, 1);

	}

	.btn-item {
		flex: 1;
		text-align: center;
		line-height: 27px;
		box-sizing: border-box;
		color: rgba(196, 156, 90, 1);
	}

	.btn-item:first-child {
		border-right: 1px solid rgba(196, 156, 90, 1);
	}

	.active {
		color: rgb(255, 255, 255);
		background: rgba(196, 156, 90, 1);
	}

	.go-back {
		font-size: 17px;
	}


	.tongzhi-box {
		background: rgb(255, 255, 255);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 30upx;
		justify-content: flex-start;
	}


	.xiaoxi-box {
		padding: 0 30upx;
		background: rgb(255, 255, 255);

	}

	.kehu-lists {
		background: rgb(255, 255, 255);
	}

	.kehu-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid rgb(0, 0, 0, 0.05);
		justify-content: space-between;
		height: 65px;

	}

	.kehu-message-bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		color:rgba(153,153,153,1);
		font-size:12px

	}

	.touxiang-box {

		margin-right: 20upx;
	}

    .touxiang-image {
		width: 45px;
		height: 45px;

	}
	.kehu-message{
		flex: 1;
	}
	.kehu-message-top {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 16px;
		line-height: 30px;
		justify-content: space-between;
		
	}

	.kehu-message-bottom {
		line-height: 15px;
		font-size: 10px;
	}

	.time {
		
		color: rgba(204, 204, 204, 1);
		line-height: 24px;
		font-size: 12px;
	}
</style>
